<template>
  <!-- 协调空间 -->
  <div>
    <NavigationComponent />

    <!-- 搜索 -->
    <div class="search-top">
      <el-input
        placeholder="请输入搜索内容"
        prefix-icon="el-icon-search"
        v-model="searchValue"
        class="inputClass"
        @keyup.enter.native="searchInputEnter"
      >
      </el-input>
    </div>

    <div class="table_box">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-style="{ height: '52px' }"
        :header-row-style="{ height: '52px' }"
        @row-dblclick="tabelRowDblclick"
        @selection-change="getSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="文件名" show-overflow-tooltip>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">文件名</span>
            <div v-else class="btn-header">
              <div class="btn-box" @click="DeleteList(tableDataSelection)">
                <svg-icon icon-class="trash" class="btn-icon"></svg-icon>
                删除
              </div>
            </div>
          </template>

          <template #default="scope">
            <svg-icon :icon-class="selectSvgIcons(scope.row)" style="font-size: 30px; vertical-align: middle; margin-right: 6px"></svg-icon>
            <span class="realName_class">{{ scope.row.fileName }}{{ scope.row.suffix ? '.' + scope.row.suffix : '' }}</span>
          </template>
        </el-table-column>

        <el-table-column>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">用户权限</span>
            <span v-else></span>
          </template>

          <template #default="scope"> {{ proxy.$yuUtils.dictComparison(roleList, scope.row.operation) }} </template>
        </el-table-column>

        <el-table-column>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">链接分享范围</span>
            <span v-else></span>
          </template>

          <template #default="scope"> {{ proxy.$yuUtils.dictComparison(invitation_range, scope.row.operationType) }} </template>
        </el-table-column>

        <el-table-column>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">操作</span>
            <span v-else></span>
          </template>

          <template #default="scope">
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-icon><Delete @click="DeleteList([scope.row])" /></el-icon>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="复制链接" placement="top">
              <el-icon><CopyDocument @click="copyLinkClick(scope.row)" /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页数据 -->
    <div style="margin-top: 25px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestStr.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="requestStr.size"
        layout="total, prev, pager, next, sizes"
        :total="requestStr.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import NavigationComponent from './personal-component/navigation-component.vue'; // 导航信息
import { roleList_person_invitation, roleList_person_invitation_range } from '@/utils/roleList';
import { ApiPerUrllist, ApiPerUrldel } from '@/api/personDoc/personDocApi';
const searchValue = ref('');
const tableData = ref([]);
const tableDataSelection = ref([]);

const requestStr = reactive({
  page: 1,
  size: 10,
  total: 0
});

const invitation_range = ref(roleList_person_invitation_range);

const roleList = reactive([{ label: '所有者', value: 'owner' }, ...roleList_person_invitation]);

/**icon转换 */
const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};

const getList = () => {
  let oParam = {
    page: requestStr.page - 1,
    size: requestStr.size,
    fileName: searchValue.value
  };
  ApiPerUrllist(oParam).then((res) => {
    console.log('🚀 ~ ApiPerUrllist ~ res:', res);
    if (res.code == 200) {
      tableData.value = res.data.rows;
      requestStr.total = res.data.total;
    }
  });
};
// 双击某一行
const tabelRowDblclick = (row: any) => {
  console.log('🚀 ~ tabelRowDblclick ~ row:', row);
  // proxy.$router.push(row.url);
};

// 多选
const getSelectionChange = (val: any) => {
  tableDataSelection.value = val;
};

// 搜索
const searchInputEnter = () => {
  handleCurrentChange(1);
};

// 删除
const DeleteList = (arrs) => {
  let mesStr = '';
  if (arrs.findIndex((item) => item.operation == 'owner') != -1) {
    mesStr = '你的选择当中存在所有者的链接,是否关闭所有者协同的链接,并删除协同链接?';
  } else {
    mesStr = '是否删除协同链接?';
  }
  ElMessageBox.confirm(mesStr, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      apiSynergyUrlDeleteUsers(arrs);
    })
    .catch(() => {});
};

// 删除接口
const apiSynergyUrlDeleteUsers = (arrs) => {
  let ids = arrs.map((item) => item.id);
  ApiPerUrldel(ids).then((res) => {
    if (res.code === 200) {
      ElMessage.success('删除成功');
      handleCurrentChange(1);
    }
  });
};

// 复制链接
const copyLinkClick = (val) => {
  let url = window.location.origin + val.url;
  //新建一个文本框
  let oInput = document.createElement('input');
  //赋值给文本框
  oInput.value = url;
  document.body.appendChild(oInput);
  // 选择对象;
  oInput.select();
  // 执行浏览器复制命令
  document.execCommand('Copy');
  //复制完成删除掉输入框
  oInput.remove();
  ElMessage.success('复制成功');
};

//分页
const handleCurrentChange = (val) => {
  requestStr.page = val;
  getList();
};
//每页
const handleSizeChange = (val) => {
  requestStr.size = val;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
// ::deep(.el-input__wrapper) {
//   box-shadow: none;
//   border: none;
// }

:deep(.el-input__wrapper) {
  box-shadow: none;
  border: none;
}

::deep(.el-input__inner) {
  border: none;
}

.search-top {
  display: flex;
  align-items: center;
  height: 48px;
  padding-right: 20px;
  margin-left: 20px;
  border-bottom: 1px solid #eee;
  .inputClass {
    width: 220px;
  }
}
.table_box {
  margin-left: 20px;
  .btn-header {
    height: 32px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 999;
    padding: 0px;
    .btn-box {
      display: flex !important;
      align-items: center !important;
      color: #666;
      font-size: 14px;
      padding: 0px;
      margin-right: 20px;
      cursor: pointer;
      white-space: nowrap;
      font-weight: 400;
      .btn-icon {
        margin-right: 6px;
        color: #999;
        font-size: 15px;
      }
      .svg-icon {
        width: 15px;
        height: 15px;
        margin-right: 6px;
      }
    }
    .btn-box:hover {
      color: rgb(102, 152, 255);
    }
    .btn-box:hover .svg-icon {
      color: rgb(102, 152, 255);
    }
    .btn-box:hover .btn-icon {
      color: rgb(102, 152, 255);
    }
  }
  i {
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
